import { mpModel } from '@/models/mp'
import { getLoginQr, getMpPage, MpVO } from '@/services/MpService'
import { useAccess, useModel } from '@@/exports'
import { ProColumns, ProTable } from '@ant-design/pro-components'
import { useRequest } from 'ahooks'
import { Button, Modal, Space } from 'antd'
import { observer } from 'mobx-react-lite'
import { useEffect, useState } from 'react'

export interface MpProps {
  tableRef?: any
}

const QrModal = ({ appId }: { appId: string }) => {
  const { data: qrBase64, run: getQrData } = useRequest(async () => getLoginQr(appId), { manual: true })

  const [status, setStatus] = useState<boolean>(false)
  useEffect(() => {
    if (status) {
      getQrData()
    }
  }, [status])
  return (
    <>
      <Button type="link" onClick={() => setStatus(true)}>
        后台授权
      </Button>
      <Modal open={status} destroyOnClose={true} onCancel={() => setStatus(false)}>
        <img src={'data:image/png;base64,' + qrBase64}/>
      </Modal>
    </>
  )
}

const MpTable = (props: MpProps) => {
  const access = useAccess()
  let { getDictEnum } = useModel('dict')

  const handleClickMiniappBtnEvent = () => {}

  /**
   * 列定义
   */
  const columns: ProColumns<MpVO>[] = [
    {
      title: 'id',
      dataIndex: 'id',
      width: 120,
      hideInTable: true,
      hideInSearch: true,
    },
    {
      title: '头像',
      dataIndex: 'headImg',
      valueType: 'avatar',
      width: 50,
      hideInSearch: true,
    },
    {
      title: '昵称',
      dataIndex: 'nickName',
      width: 250,
      hideInSearch: true,
    },
    {
      title: '类型',
      dataIndex: 'serviceTypeInfo',
      valueEnum: getDictEnum('service_type_info'),
      width: 250,
      hideInSearch: true,
    },
    {
      title: '公众号认证类型',
      dataIndex: 'verifyTypeInfo',
      valueEnum: getDictEnum('verify_type_info'),
      width: 120,
      hideInSearch: true,
    },
    {
      title: '公众号名称',
      dataIndex: 'userName',
      width: 150,
      hideInSearch: true,
    },
    {
      title: '公司名',
      dataIndex: 'principalName',
      width: 400,
      hideInSearch: true,
    },
    {
      title: '微信支付',
      dataIndex: 'openPay',
      width: 120,
      hideInSearch: true,
    },
    {
      title: '账号状态',
      dataIndex: 'accountStatus',
      valueEnum: getDictEnum('account_status'),
      width: 120,
      hideInSearch: true,
    },
    {
      title: '账号介绍',
      dataIndex: 'signature',
      width: 120,
      ellipsis: true,
      hideInSearch: true,
    },
    {
      title: '注册方式',
      dataIndex: 'registerType',
      valueEnum: getDictEnum('register_type'),
      width: 250,
      hideInSearch: true,
    },
    {
      title: '创建时间',
      dataIndex: 'createdTime',
      width: 180,
      hideInSearch: true,
    },
    {
      title: '更新时间',
      dataIndex: 'updatedTime',
      width: 180,
      hideInSearch: true,
    },
    {
      title: '操作',
      render: (_: any, record: MpVO) => [
        <Space key="operate">
          {record.serviceTypeInfo === 2 && (
            <Button
              type="link"
              href={`https://mp.weixin.qq.com/cgi-bin/fastregisterauth?appid=${record.appId}&component_appid=wx6c70af440f4ef604&copy_wx_verify=1&redirect_uri=https%3A%2F%2Fleuan.top%2Fadmin%2Fmp%2FcreateMiniapp`}
            >
              创建小程序
            </Button>
          )}
          {record.nickName === '' && (
            <Button type="link" onClick={() => mpModel.openCreateMiniappModel(record)}>
              设置小程序
            </Button>
          )}
          <QrModal appId={record.appId} />
          {/*{access.hasMpUpdatePerm && <Popconfirm*/}
          {/*    title="确定要解除授权吗"*/}
          {/*    onConfirm={() => {*/}
          {/*        removeMp(record.id).then(() => props.tableRef?.current?.resetFields())*/}
          {/*    }}*/}
          {/*    okText="确认"*/}
          {/*    cancelText="取消"*/}
          {/*>*/}
          {/*    <Button type="link" danger size="small">解除授权</Button>*/}
          {/*</Popconfirm>}*/}
        </Space>,
      ],
      fixed: 'right',
      hideInSearch: true,
    },
  ]

  // 工具栏
  let actions = [<Button onClick={mpModel.goToAuthUrl}>绑定公众号</Button>]

  return (
    <>
      <ProTable
        pagination={{
          showQuickJumper: true,
          showSizeChanger: true,
          pageSizeOptions: ['20', '50', '100'],
        }}
        actionRef={props.tableRef}
        columns={columns}
        request={getMpPage}
        toolbar={{
          actions: actions,
        }}
        columnEmptyText={false}
        defaultSize="small"
        revalidateOnFocus
        scroll={{ x: 500 }}
        sticky={{ offsetHeader: 55, offsetScroll: 5 }}
      ></ProTable>
    </>
  )
}

export default observer(MpTable)

// https://mp.weixin.qq.com/wxopen/componentrebindadmin?appid=wxc0de2842b8fc0c71&component_appid=wx6c70af440f4ef604&copy_wx_verify=1&redirect_uri=https%3A%2F%2Fleuan.top%2Fadmin%2Fmp%2FcreateMiniapp
